<script setup lang="ts">
import { ref, markRaw } from 'vue'
import { getIcon } from '@/composables/useIcons'
import BaseButton from '@/components/BaseButton.vue'
import BaseIcon from '@/components/BaseIcon.vue'

const statistics = ref([
  {
    label: '总用户数',
    value: '1,234',
    icon: markRaw(getIcon('icon-user') as object),
    trend: '+12%',
    color: 'from-blue-200 to-blue-400',
  },
  {
    label: '活跃用户',
    value: '789',
    icon: markRaw(getIcon('icon-fire') as object),
    trend: '+8%',
    color: 'from-purple-200 to-purple-400',
  },
  {
    label: '总访问量',
    value: '45,678',
    icon: markRaw(getIcon('icon-eye') as object),
    trend: '+25%',
    color: 'from-green-200 to-green-400',
  },
  {
    label: '转化率',
    value: '23%',
    icon: markRaw(getIcon('icon-wechat') as object),
    trend: '+5%',
    color: 'from-orange-200 to-orange-400',
  },
])

const quickActions = ref([
  {
    title: '数据分析',
    icon: markRaw(getIcon('icon-bar-chart') as object),
    desc: '查看详细的数据分析报告',
    bgColor: 'bg-gradient-to-br from-blue-50 to-blue-100',
  },
  {
    title: '用户管理',
    icon: markRaw(getIcon('icon-tag') as object),
    desc: '管理系统用户及权限',
    bgColor: 'bg-gradient-to-br from-purple-50 to-purple-100',
  },
  {
    title: '内容管理',
    icon: markRaw(getIcon('icon-file') as object),
    desc: '管理系统内容及资源',
    bgColor: 'bg-gradient-to-br from-green-50 to-green-100',
  },
  {
    title: '系统设置',
    icon: markRaw(getIcon('icon-settings') as object),
    desc: '配置系统参数',
    bgColor: 'bg-gradient-to-br from-orange-50 to-orange-100',
  },
])
</script>

<template>
  <div class="p-8 bg-gray-50 min-h-screen">
    <!-- 顶部欢迎区域 -->
    <div class="mb-8 bg-white rounded-xl p-8 shadow-sm border border-gray-100">
      <div class="flex items-center justify-between">
        <div>
          <h1
            class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
          >
            欢迎回来，管理员
          </h1>
          <p class="text-gray-500 mt-2 text-lg">
            今天是
            {{
              new Date().toLocaleDateString('zh-CN', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
              })
            }}
          </p>
        </div>
        <BaseButton type="primary" size="large" shape="round" class="shadow-md">
          <template #icon><BaseIcon name="icon-plus" /></template>
          快速操作
        </BaseButton>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div
        v-for="stat in statistics"
        :key="stat.label"
        class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
      >
        <div class="flex items-center justify-between">
          <div class="flex-1">
            <p class="text-gray-500 text-sm font-medium">{{ stat.label }}</p>
            <p
              class="text-3xl font-bold mt-2 bg-gradient-to-r bg-clip-text text-transparent"
              :class="stat.color"
            >
              {{ stat.value }}
            </p>
            <div class="flex items-center mt-2">
              <a-tag color="green" size="small">
                <template #icon><BaseIcon name="icon-arrow-rise" /></template>
                {{ stat.trend }}
              </a-tag>
            </div>
          </div>
          <div :class="`p-4 rounded-full bg-gradient-to-br ${stat.color} bg-opacity-10`">
            <component :is="stat.icon" :size="24" :class="`text-${stat.color.split('-')[1]}-500`" />
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷操作区域 -->
    <div class="mb-8">
      <h2 class="text-xl font-bold mb-6 flex items-center">
        <div class="w-1 h-6 bg-blue-600 rounded-full mr-3"></div>
        快捷操作
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div
          v-for="action in quickActions"
          :key="action.title"
          :class="`${action.bgColor} rounded-xl p-6 cursor-pointer hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-gray-100`"
        >
          <div class="flex flex-col items-center text-center">
            <div class="p-4 rounded-full bg-white shadow-sm mb-4">
              <component :is="action.icon" :size="28" />
            </div>
            <h3 class="font-bold text-lg mb-2">{{ action.title }}</h3>
            <p class="text-gray-600 text-sm">{{ action.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-6">
          <h3 class="font-bold text-lg">访问趋势</h3>
          <a-select default-value="week" size="small" style="width: 120px">
            <a-option value="week">最近一周</a-option>
            <a-option value="month">最近一月</a-option>
            <a-option value="year">最近一年</a-option>
          </a-select>
        </div>
        <div
          class="h-80 bg-gradient-to-b from-blue-50 to-transparent rounded-lg flex items-center justify-center"
        >
          图表区域示例
        </div>
      </div>

      <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-6">
          <h3 class="font-bold text-lg">用户分布</h3>
          <a-radio-group type="button" default-value="region">
            <a-radio value="region">地区分布</a-radio>
            <a-radio value="device">设备分布</a-radio>
          </a-radio-group>
        </div>
        <div
          class="h-80 bg-gradient-to-b from-purple-50 to-transparent rounded-lg flex items-center justify-center"
        >
          图表区域示例
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.a-card {
  transition-property: all;
  transition-duration: 300ms;
}

:deep(.arco-btn-primary) {
  background-image: linear-gradient(to right, rgb(37, 99, 235), rgb(147, 51, 234));
  border: none;
}

:deep(.arco-radio-button) {
  font-size: 0.875rem;
}
</style>
